<template>
  <div class="login">
    <div class="logo">
      <img :src="logo" alt="" />
    </div>
    <div>{{ name }}</div>
    <div class="inputClass">
      <input
        type="number"
        maxlength="11"
        placeholder="请输入手机号"
        v-model="phone"
      />
    </div>
    <div class="inputClass">
      <div>
        <input
          type="number"
          placeholder="请输入手机验证码"
          maxlength="6"
          oninput="if(value.length>6)value=value.slice(0,6)"
          v-model="vercode"
        />
      </div>
      <div>
        <button class="sbtn" :disabled="!smsValidate" @click="getSms()">
          {{ smstxt }}
        </button>
      </div>
    </div>
    <div class="loginbtn" :disabled="!loginValidate" @click="login">
      登录
    </div>
    <div class="ruletxt" @click="license">
      点击登陆，即表示阅读并同意<span style="color: #f54e49;"
        >《用户服务协议》</span
      >
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  components: {},
  data() {
    return {
      smstxt: '获取验证码',
      phone: '',
      vercode: '',
      logo: '',
      name: '',
      startTimer: false,
      activityid: null,
    };
  },
  computed: {
    loginValidate() {
      let { phone, vercode } = this;
      if (phone.length === 11 && vercode.length > 0) {
        return true;
      }
      return false;
    },
    smsValidate() {
      let { phone, startTimer } = this;
      if (phone.length === 11 && !startTimer) {
        return true;
      }
      return false;
    },
  },
  mounted() {
    if (this.$route.query.activityid) {
      this.activityid = this.$route.query.activityid;
    }
    if (this.$route.query.name) {
      this.name = this.$route.query.name;
    }
    if (this.$route.query.logo) {
      this.logo = this.$route.query.logo;
    }
    this.init();
  },
  methods: {
    init() {
      document
        .querySelector('body')
        .setAttribute('style', 'background-color:#ffffff');
    },
    login() {
      this.$api
        .login({
          mobile: this.phone,
          code: this.vercode,
          activity_id: this.activityid,
          open_id: localStorage['openid'],
        })
        .then(res => {
          if (res.code == 200) {
            localStorage['token'] = res.data.token;
            localStorage['mobile'] = this.phone;
            this.$toast('登录成功');
            this.$router.back(-1);
          } else {
            this.$toast(res.message);
          }
        })
        .catch(err => {
          this.$toast('网络错误');
        });
    },
    getSms() {
      if (this.startTimer) {
        return;
      }
      this.$api
        .send_sms({
          mobile: this.phone,
        })
        .then(res => {
          let num = 60;
          if (res.code == 200) {
            this.startTimer = true;
            let timer = setInterval(() => {
              if (num <= 0) {
                this.smstxt = '获取验证码';
                this.startTimer = false;
                clearInterval(timer);
                return;
              }
              num = num - 1;
              this.smstxt = num + 's';
            }, 1000);
          }
          this.$toast(res.message);
        })
        .catch(err => {
          this.$toast('网络错误');
        });
    },
    license() {
      this.$router.push({
        name: 'license',
      });
    },
  },
};
</script>
<style lang="scss">
.login {
  width: 100w;
  height: 100vh;
  background: white;
  display: flex;
  align-content: center;
  flex-direction: column;
  padding: 100px;
}
.logo {
  margin-bottom: 30px;
  img {
    width: 150px;
    height: 150px;
  }
}
.inputClass {
  margin-top: 60px;
  border-bottom: solid 2px #1516181a;
  line-height: 80px;
  display: flex;
  justify-content: space-between;
}
.inputClass input {
  line-height: 80px;
  width: 100%;
  text-align: left;
  //   height: 80px;
  font-size: 28px;
  color: #060606;

  border: 0; // 去除未选中状态边框
  outline: none; // 去除选中状态边框
  background-color: rgba(0, 0, 0, 0); // 透明背景
}
input::-webkit-input-placeholder {
  color: #c9c9c9;
  font-size: 28px;
}
.sbtn {
  height: 50px;
  text-align: center;
  border-radius: 100px;
  width: 150px;
  font: 24px arial, sans-serif;
  //   font-weight: bold;
  color: #333333;
  padding: 0 13px;
  border: solid 2px #fc837f;
  color: #fa7975;
  background-color: white;
}
.sbtn[disabled] {
  color: #999999;
  background-color: #d4d4d4 !important;
  border-color: #d4d4d4;
}
.loginbtn {
  margin-top: 70px;
  height: 80px;
  background-image: linear-gradient(180deg, #fb7874 0%, #f54e49 100%);
  border-radius: 10px;
  font-size: 36px;
  line-height: 80px;
  color: #ffffff;
}
.loginbtn[disabled] {
  opacity: 0.5;
}
.ruletxt {
  text-align: left;
  margin-top: 20px;
  font-size: 22px;
  color: #999999;
}
</style>
